<template>
  <div id="Poster" class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <slider-1 ref="slider-1" />
      </div>
      <div class="swiper-slide">
        <slider-2 ref="slider-2" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import Slider1 from './components/slider-1.vue'
import Slider2 from './components/slider-2.vue'
import { SliderComponents } from './types'

@Component({
  name: 'Poster',
  components: {
    Slider1,
    Slider2,
  },
})
export default class extends Vue {
  private swiper!: Swiper;

  private activeIndex = 0;

  mounted() {
    this.swiper = new Swiper('#Poster', {
      direction: 'vertical',
      loop: false,
      autoplay: false,
      pagination: {
        el: '.swiper-pagination',
        bulletClass: 'bullet',
        bulletActiveClass: 'bullet-active',
      },
      mousewheel: true,
      resistanceRatio: 0,
      on: {
        init: () => {
          this.$nextTick(() => {
            this.emitAnimate()
          })
        },
        slideChangeTransitionStart: () => {
          this.emitAnimate()
        },
        slideChangeTransitionEnd: () => {
          this.emitAnimated()
        },
      },
    })
  }

  emitAnimate() {
    const nextSlider: SliderComponents = this.$refs['slider-' + (this.swiper.activeIndex + 1)] as SliderComponents
    nextSlider.animate()
  }

  emitAnimated() {
    const prevSlider: SliderComponents = this.$refs['slider-' + (this.activeIndex + 1)] as SliderComponents
    prevSlider.animated()

    this.activeIndex = this.swiper.activeIndex
  }
}
</script>

<style lang="scss">
.swiper-container#Poster {
  width: 100vw;
  height: 100vh;

  @import './index.scss';

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/static/img/poster/bg.jpg');
    background-size: 100% auto;
    background-position: center center;
    background-repeat: repeat-y;
  }

  // .swiper-slide:nth-child(2n) {
  //   background-color: #99a9bf;
  // }

  // .swiper-slide:nth-child(2n + 1) {
  //   background-color: #d3dce6;
  // }

  .bullet {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px 0;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .bullet-active {
    background-color: rgba(255, 255, 255, 1);
  }

}

</style>
